<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-0"
    ></u-loading-page>
    <view
      style="min-height: 100vh"
      class="bg-cover"
      :class="
        isRegister.styleVO.imagePath1 || isRegister.styleVO.styleInfo1
          ? ''
          : 'bg-primary'
      "
      :style="
        isRegister.styleVO.imagePath1 || isRegister.styleVO.styleInfo1
          ? `background:${isRegister.styleVO.styleInfo1}; background-image: url(${isRegister.styleVO.imagePath1})`
          : ''
      "
    >
      <!--登录-->
      <view class="fixed left-9 right-9 top-1/2 -mt-20">
        <u--form :model="form" :rules="rules" ref="form" errorType="toast">
          <u-form-item class="px-5 rounded-full bg-inputOrange" prop="phone">
            <u--input
              v-model="form.phone"
              type="number"
              shape="circle"
              border="none"
              fontSize="32rpx"
              color="#FFFFFF"
              placeholderStyle="color: #F2F2F2"
              placeholder="手机"
              clearable
            >
            </u--input>
          </u-form-item>
          <u-form-item
            class="px-5 rounded-full bg-inputOrange flex justify-between mt-4"
            prop="passwd"
          >
            <view class="w-4/5">
              <u--input
                v-model="form.passwd"
                type="password"
                shape="circle"
                border="none"
                fontSize="32rpx"
                color="#FFFFFF"
                placeholderStyle="color: #F2F2F2"
                placeholder="密码"
                clearable
              >
              </u--input>
            </view>
            <view class="text-white text-xs w-1/5" @click="goTo('forget')"
              >找回密码</view
            >
          </u-form-item>
        </u--form>
        <view class="flex justify-end mt-4" @click="onTip">
          <view
            class="w-12 h-12 rounded-full bg-white flex justify-center shadow"
            ><u-icon
              name="arrow-rightward"
              color="#FF3D62"
              size="42rpx"
            ></u-icon
          ></view>
        </view>
      </view>
      <view class="text-center text-white text-sm fixed bottom-14 w-full"
        >|<text class="mx-2.5" @click="toRegister">用户注册</text>|<text
          class="mx-2.5"
          @click="goTo('sms-login')"
          >短信登录</text
        ></view
      >

      <!--隐私协议弹窗-->
      <u-popup :show="isShow" @close="isShow = false" mode="bottom" :round="80">
        <view class="text-center text-base py-6">
          <text
            >请阅读<text style="color: #3e84ff" @click.stop="showService = true"
              >《用户协议》</text
            >和<text style="color: #3e84ff" @click.stop="showPrivacy = true"
              >《隐私政策》</text
            ></text
          >
        </view>
        <view class="flex justify-between mx-7 pb-16 mt-2">
          <view
            class="text-center text-base rounded-full w-1/2 h-10 leading-10 border-common mr-4"
            @click="isShow = false"
            >不同意</view
          >
          <view
            class="text-center text-base text-white rounded-full w-1/2 h-10 leading-10 login-btn ml-4"
            @click="onLogin"
            >同意</view
          >
        </view>
      </u-popup>

      <!--注册暂未开放弹窗-->
      <u-popup :show="isOpen" @close="isOpen = false" mode="center" :round="80">
        <view class="w-64 h-64">
          <view class="flex justify-center mt-9">
            <u-image
              width="220"
              height="220"
              src="/static/images/iconNotopen.png"
            ></u-image>
          </view>
          <view class="text-center text-dark text-2xl mt-10">暂未开放</view>
        </view>
      </u-popup>

      <!--用户协议/隐私政策-->
      <u-modal
        :show="showService"
        confirm-text="我已阅读"
        confirm-color="red"
        @confirm="showService = false"
        negativeTop="320rpx"
      >
        <scroll-view
          style="height: 520rpx; font-size: 32rpx"
          scroll-y
          v-if="service.html != null"
        >
          <rich-text :nodes="service.html"></rich-text>
        </scroll-view>
      </u-modal>
      <u-modal
        :show="showPrivacy"
        confirm-text="我已阅读"
        confirm-color="red"
        @confirm="showPrivacy = false"
        negativeTop="320rpx"
      >
        <scroll-view
          style="height: 520rpx; font-size: 32rpx"
          scroll-y
          v-if="privacy.html != null"
        >
          <rich-text :nodes="privacy.html"></rich-text>
        </scroll-view>
      </u-modal>
    </view>
  </view>
</template>

<script>
import { login, getInviteStatus } from '../../services/user-details';
import { getRichText } from '../../../services/user';

export default {
  data() {
    return {
      isLoading: true,
      //用户协议/隐私政策
      showService: false,
      showPrivacy: false,
      service: {},
      privacy: {},
      isShow: false,
      isOpen: false,
      form: {
        phone: '',
        passwd: '',
      },
      rules: {
        phone: [
          {
            type: 'string',
            required: true,
            message: '请输入手机号',
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: '手机号码不正确',
          },
        ],
        passwd: {
          required: true,
          message: '请输入密码',
        },
      },
      //获取是否开启邀请（及样式数据）
      isRegister: {
        styleVO: {
          imagePath1: '',
        },
      },
    };
  },
  async created() {
    this._getInviteStatus();
    this.getPolicyText();
    this.getAgreementText();
    //取出缓存中的账号、密码
    const phoneBuy = uni.getStorageSync(
      'phoneBuy' + process.env.VUE_APP_PLATFORMID
    );
    const passwdBuy = uni.getStorageSync(
      'passwdBuy' + process.env.VUE_APP_PLATFORMID
    );
    if (phoneBuy) {
      this.form.phone = phoneBuy;
    }
    if (passwdBuy) {
      this.form.passwd = passwdBuy;
    }
  },
  methods: {
    //获取是否开启邀请（及样式数据）
    async _getInviteStatus() {
      const { code, data } = await getInviteStatus({ pageType: 'login' });
      if (code != 200) return;
      this.isLoading = false;
      this.isRegister = data;
    },
    //获取用户协议/隐私政策
    async getPolicyText() {
      const { code, data } = await getRichText({ type: 'policy' });
      if (code != 200) return;
      this.privacy = data;
    },
    async getAgreementText() {
      const { code, data } = await getRichText({ type: 'agreement' });
      if (code != 200) return;
      this.service = data;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //用户协议弹窗
    onTip() {
      this.$refs.form
        .validate()
        .then((res) => {
          this.isShow = true;
        })
        .catch((errors) => {
          //uni.$u.toast('校验失败')
        });
    },
    //登录方法
    async onLogin() {
      try {
        let params = {
          passwd: this.form.passwd,
          phone: this.form.phone,
          loginType: 'passwd',
        };
        const { code, data, msg } = await login(params);
        //请使用短信登录提示，自动跳转到短信登录页面
        if (code == 901) {
          uni.$u.toast(msg);
          setTimeout(() => {
            this.$Router.push({
              name: 'sms-login',
            });
          }, 800);
        }
        if (code != 200) return;
        //记住账号密码功能
        uni.setStorageSync(
          'phoneBuy' + process.env.VUE_APP_PLATFORMID,
          this.form.phone
        );
        uni.setStorageSync(
          'passwdBuy' + process.env.VUE_APP_PLATFORMID,
          this.form.passwd
        );
        //记住账号密码功能
        const { accessToken, expiresIn } = data;
        //console.log('tokenBuy' + process.env.VUE_APP_PLATFORMID);
        uni.setStorageSync(
          'tokenBuy' + process.env.VUE_APP_PLATFORMID,
          accessToken
        );
        uni.setStorageSync('expireAtBuy', expiresIn * 1000);
        await this.$store.dispatch('getUser');
        this.$Router.replaceAll({
          name: 'index',
        });
      } catch (error) {
        console.error(error);
      }
    },
    //注册暂未开放
    toRegister() {
      if (this.isOpen) {
        this.isOpen = true;
      } else {
        this.$Router.push({
          name: 'register',
        });
      }
    },
    //隐私协议
    goDetail(code) {
      this.$Router.push({
        name: 'article',
        params: {
          code: code,
        },
      });
    },
  },
};
</script>

<style>
page {
  background: #ffa829;
}
</style>
